<template>
  <div class="detail">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="登陆账号设置" name="loginSetting">
          <el-form
            label-width="120px"
            style="width: 40%; margin: 30px auto"
            :model="userInfo"
            :rules="rules"
            ref="form"
          >
            <el-form-item label="姓名:" prop="username">
              <el-input v-model="userInfo.username" type="text"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
              <el-input v-model="userInfo.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="saveEmp">
                更新
              </el-button>
              <el-button type="info" size="small" @click="$router.go(-1)">
                取消
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="userInfo">
          <user-info />
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="jobInfo">
          <job-info />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { userPhoto } from "@/api/user";
import { saveEmp } from "@/api/employees";

import userInfo from "./components/user-info";
import jobInfo from "./components/job-info";

export default {
  components: { userInfo, jobInfo },
  name: "userDetail",
  components: {
    userInfo,
    jobInfo,
  },
  data() {
    return {
      activeName: "loginSetting",
      userInfo: {},
      rules: {
        username: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.userAll();
  },
  methods: {
    async userAll() {
      let res = await userPhoto(this.$route.query.id);
      //   console.log(res);
      this.userInfo = res.data;
    },
    saveEmp() {
      this.$refs.form.validate(async (v) => {
        if (v) {
          await saveEmp(this.userInfo);
          this.$message.success("修改成功!");
        }
      });
    },
  },
};
</script>

<style>
.detail .el-card {
  margin-left: 20px;
  margin-top: 20px;
}
</style>